<template>
  <div class="battle-top3-item">
    <div class="battle-top3-item-avatar">
      <img src="@/static/img/battle/avatar.png" class="image-border" />
      <img class="image-avatar" :src="user.avatar" />
    </div>
    <span class="battle-top3-item-score">{{ score }}</span>
    <img class="img-pillar" v-if="level === 1" src="@/static/img/battle/top1.png" />
    <img class="img-pillar" v-if="level === 2" src="@/static/img/battle/top2.png" />
    <img class="img-pillar" v-if="level === 3" src="@/static/img/battle/top3.png" />
    <span class="battle-top3-item-nickname text-overflow">{{ user.nickname }}</span>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from "vue";
import { ScoreRunkItem } from "../services";
import { processScore } from "../util";

export default defineComponent({
  setup(props) {
    return {
      score: computed(() => {
        return processScore(props.user.integral);
      })
    }
  },

  props: {
    level: Number,
    user: {
      type: Object as PropType<ScoreRunkItem>,
      default: () => ({}),
    },
  },
});
</script>

<style scope lang="scss">
.battle-top3-item {
  position: relative;
  text-align: center;

  &:nth-child(1) {
    width: 93px;
  }
  &:nth-child(2) {
    width: 126px;
    .battle-top3-item-score {
      margin-top: 3px;
    }
  }
  &:nth-child(3) {
    width: 93px;
  }

  .battle-top3-item-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto 12px auto;

    .image-border {
      width: 100%;
      height: 100%;
    }

    .image-avatar {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .img-pillar {
    width: 100%;
  }

  .battle-top3-item-score {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #ffffff;
  }

  .battle-top3-item-nickname {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin-top: 10px;
    display: block;
  }
}
</style>

<style scoped lang="scss">
@media screen and (max-width: 600px) {
  .battle-top3-item {
    margin-right: 11px;

    &:nth-child(1),
    &:nth-child(3) {
      width: 50px;
    }
    &:nth-child(2) {
      width: 55px;
      .battle-top3-item-score {
        margin-top: -1px;
      }
    }

    .battle-top3-item-score {
      font-size: 12px;
      line-height: 12px;
      display: block;
    }

    .battle-top3-item-nickname {
      margin-top: 6px;
      font-size: 12px;
    }

    .battle-top3-item-avatar {
      width: 39px;
      height: 39px;
      margin-bottom: 7px;

      .image-avatar {
        width: 36px;
        height: 36px;
      }
    }
  }
}
</style>
